﻿<!DOCTYPE HTML>
<html lang="en">
    <head>
		<meta name="viewport" content="user-scalable=no, width=device-width" />
		<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0;">
		<link rel="stylesheet" href="assets/jquery.mobile-1.2.0.min.css" />
		<link rel="stylesheet" href="screen.css" />
		<title>Brief Msg</title>
    </head>
    <body>
		<noscript>
			<style type="text/css">#message, #addcontact, #sent, #deletecontact, #contacts, #editmessage, #sending, #menu, #selcontacts, #quickreply, #addqreply, #deleteqreply, #loginas, #connecting, #options, #about { display:none; }</style>
			<div class="noscriptmsg">You don't have javascript enabled. Good luck with that.</div>
		</noscript>

		<div id="message" data-role="page">
			<div data-role="header" data-position="fixed">
				<h1>Message<span id="messages-indextotal"> <span id="messages-index"></span> of <span id="messages-total"></span></span></h1>
				<div data-role="navbar">
					<ul>
						<li><a href="#quickreply" id="message-quick" data-icon="back">Quick</a></li>
						<li><a href="#editmessage" id="message-reply" data-icon="back">Reply</a></li>
						<li><a href="#message-delete" data-icon="delete">Delete</a></li>
						<li><a href="#message-prev" data-icon="arrow-l">Previous</a></li>
						<li><a href="#message-next" data-icon="arrow-r">Next</a></li>
					</ul>
				</div>
			</div>
			<div id="message-container">
				<div class="message-view">
					<div class="ui-bar ui-bar-c">
						<div class="ui-grid-a">
							<div class="ui-block-a"><div class="message-sender"></div></div>
							<div class="ui-block-b"><div class="message-time"></div></div>
						</div>
					</div>
					<div data-role="content">
						<p class="message-text"></p>
					</div>
				</div>
				<div id="message-nomessages" style="text-align:center;"><h1>No Messages</h1></div>
				<div id="menu" data-role="popup" data-position-to="window">
					<ul data-role="listview" data-inset="true" data-theme="a" id="menu-listview">
						<li><a href="#loginas">Account</a></li>
						<li><a href="#contacts">Contacts</a></li>
						<li><a href="#options">Options</a></li>
						<li><a href="#about">About</a></li>
					</ul>
				</div>
				<div id="status" data-role="popup" data-position-to="window">
					<ul data-role="listview" data-inset="true" data-theme="c" id="menu-listview">
						<li data-icon="check" id="status-online"><a href="#">
							<span class="contact-status contact-online"></span>Online</a></li>
						<li data-icon="check" id="status-away"><a href="#">
							<span class="contact-status contact-away"></span>Away</a></li>
						<li data-icon="check" id="status-busy"><a href="#">
							<span class="contact-status contact-busy"></span>Busy</a></li>
					</ul>
				</div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#selcontacts" data-icon="star">New Message</a></li>
						<li><a href="#menu" data-rel="popup">Menu</a></li>
						<li><a href="#status" data-rel="popup">Status</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div id="quickreply" data-role="page">
			<div data-role="header" data-position="fixed">
				<h1>Quick Reply</h1>
			</div>
			<div data-role="content">
				<div>
					<ul data-role="listview" data-split-icon="delete" data-split-theme="c">
						<script id="quickreplylist" type="text/x-handlebars-template">
							{{resetCount}}
							{{#each this}}
							<li>
								<a href="#sending">{{this}}</a>
								<a href="#deleteqreply" data-index="{{getCount}}"></a>
							</li>
							{{/each}}
						</script>
					</ul>
				</div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#message" data-icon="back">Cancel</a></li>
						<li><a href="#addqreply" data-icon="plus">Add</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div id="addqreply" data-role="dialog">
			<div data-role="header">
				<h1>Add Quick Reply</h1>
			</div>
			<div data-role="content">
				<form id="addqreply-form">
					<div data-role="fieldcontain" class="ui-hide-label">
						<label for="addqreply-text">Text:</label>
						<input type="text" id="addqreply-text" name="text" class="required" placeholder="Text"></input>
					</div>
					<div class="ui-grid-a">
						<div class="ui-block-a"><a href="#quickreply" data-role="button">Cancel</a></div>
						<div class="ui-block-b"><a href="#quickreply" id="addqreply-ok" data-role="button">Ok</a></div>
					</div>
				</form>
			</div>
		</div>

		<div id="deleteqreply" data-role="dialog">
			<div data-role="header">
				<h1>Delete Quick Reply</h1>
			</div>
			<div data-role="content">
				<div>
					<script id="deleteqreply-template" type="text/x-handlebars-template">
						<h1>{{this}}</h1>
					</script>
				</div>
				<div class="ui-grid-a">
					<div class="ui-block-a"><a href="#quickreply" data-role="button">No</a></div>
					<div class="ui-block-b"><a href="#quickreply" id="deleteqreply-yes" data-role="button">Yes</a></div>
				</div>
			</div>
		</div>
		
		<div id="selcontacts" data-role="page">
			<div data-role="header" data-position="fixed">
				<a href="#message" data-icon="back">Back</a>
				<h1>Select Contacts</h1>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-filter="true">
					<script id="selcontacts-li-checked" type="text/x-handlebars-template">
						<li data-icon="check" data-theme="b" data-uri="{{contact.uri}}" data-index="{{index}}">
							<a href="#">
								<span class="contact-status{{#if contact.status}} contact-{{contact.status}}{{/if}}"></span>
								<span>{{contact.name}}</span>
							</a>
						</li>
					</script>
					<script id="selcontacts-li-unchecked" type="text/x-handlebars-template">
						<li data-icon="plus" data-uri="{{contact.uri}}" data-index="{{index}}">
							<a href="#">
								<span class="contact-status{{#if contact.status}} contact-{{contact.status}}{{/if}}"></span>
								<span>{{contact.name}}</span>
							</a>
						</li>
					</script>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#contacts">Edit</a></li>
						<li><a href="#editmessage" data-icon="arrow-r">Text of Message</a></li>
					</ul>
				</div>
			</div>
		</div>
				
		<div id="editmessage" data-role="page">
			<div data-role="header">
				<a href="#message" data-icon="back">Back</a>
				<h1>Text of Message</h1>
			</div>
			<div data-role="content">
				<div data-role="fieldcontain" class="ui-hide-label">
					<label for="editmessage-text">Text:</label>
					<textarea name="editmessage-text" id="editmessage-text"></textarea>
				</div>
				<p id="editmessage-remain">You have <span></span> characters remaining</p>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#sending" data-icon="arrow-r">Send</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div id="sending" data-role="page">
			<div data-role="header">
				<h1>Sending...</h1>
			</div>
			<div data-role="content">
				<h2>Sending to contact # <span id="sending-contact-index"></span> of <span id="sending-contact-total"></span>...</h2>
			</div>
		</div>

		<div id="sent" data-role="page">
			<div data-role="header" data-position="fixed">
				<h1>Message Sent</h1>
			</div>
			<div data-role="content">
				<ul data-role="listview">
					<script id="sent-list" type="text/x-handlebars-template">
						{{#each this}}
						<li>
							<h3>{{name}}</h3>
							<p>{{phrase}}</p>
						</li>
						{{/each}}
					</script>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#message" data-icon="arrow-r">OK</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div id="contacts" data-role="page">
			<div data-role="header" data-position="fixed">
				<a href="#message" data-icon="back">Back</a>
				<h1>Edit Contacts</h1>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-split-icon="delete" data-filter="true">
					<script id="contacts-li" type="text/x-handlebars-template">
						{{resetCount}}
						{{#each this}}
						<li>
							<a href="#">{{this.name}}</a>
							<a href="#deletecontact?index={{getCount}}"></a>
						</li>
						{{/each}}
					</script>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#addcontact" data-icon="add">Add</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div id="deletecontact" data-role="dialog">
			<div data-role="header">
				<h1>Delete Contact</h1>
			</div>
			<div data-role="content">
				<div>
					<script id="deletecontact-template" type="text/x-handlebars-template">
						<h1>{{name}}</h1>
					</script>
				</div>
				<div class="ui-grid-a">
					<div class="ui-block-a"><a href="#contacts" data-role="button">No</a></div>
					<div class="ui-block-b"><a href="#contacts" id="deletecontact-yes" data-role="button">Yes</a></div>
				</div>
			</div>
		</div>
		
		<div id="addcontact" data-role="dialog">
			<div data-role="header">
				<h1>Add Contact</h1>
			</div>
			<div data-role="content">
				<form id="addcontact-form">
					<div data-role="fieldcontain" class="ui-hide-label">
						<label for="addcontact-name">Name:</label>
						<input type="text" id="addcontact-name" name="name" class="required" placeholder="Name"></input>
					</div>
					<div data-role="fieldcontain" class="ui-hide-label">
						<label for="addcontact-uri">Address:</label>
						<input type="text" id="addcontact-uri" name="uri" class="required email" placeholder="Address, e.g. joe@officesip.local"></input>
					</div>
					<div class="ui-grid-a">
						<div class="ui-block-a"><a href="#contacts" data-role="button">Cancel</a></div>
						<div class="ui-block-b"><a href="#contacts" id="addcontact-ok" data-role="button">Ok</a></div>
					</div>
				</form>
			</div>
		</div>

		
		<div id="loginas" data-role="page">
			<div data-role="header" data-position="fixed">
				<a href="#message" data-icon="back">Back</a>
				<h1>Login As</h1>
			</div>
			<div data-role="content">
				<form id="loginas-form">
					<div data-role="fieldcontain" class="ui-hide-label">
						<label for="login-name">Username:</label>
						<input type="text" id="login-name" name="name" placeholder="Username" value=""></input>
					</div>
					<div data-role="fieldcontain" class="ui-hide-label">
						<label for="login-domain">Domain:</label>
						<input type="text" id="login-domain" name="domain" value="" placeholder="Domain"></input>
					</div>
					<div data-role="fieldcontain" class="ui-hide-label">
						<label for="login-password">Password:</label>
						<input type="password" id="login-password" name="password" placeholder="Password" value=""></input>
					</div>
					<div data-role="fieldcontain" class="ui-hide-label">
						<label for="login-address">Proxy address:</label>
						<input type="text" id="login-address" name="proxy" placeholder="Proxy address" value=""></input>
					</div>
				</form>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#logout">Logout</a></li>
						<li><a href="#login" data-icon="check">Login</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div id="options" data-role="page">
			<div data-role="header">
				<a href="#message" data-icon="back">Back</a>
				<h1>Options</h1>
			</div>
			<div data-role="content">
				<form id="options-form">
					<label for="options-play-i"><input type="checkbox" id="options-play-i" name="playWhenArrives" value="true"></input>Play a sound when a new message arrives</label>
					<label for="options-play-o"><input type="checkbox" id="options-play-o" name="playAfterSending" value="true"></input>Play a sound after sending message</label>
					<div class="desktop">
						<label for="options-alway-on-top"><input type="checkbox" id="options-alway-on-top" name="alwaysOnTop" value="true"></input>Always on top</label>
						<label for="options-run-minimized"><input type="checkbox" id="options-run-minimized" name="runMinimized" value="true"></input>Run program in minimized window</label>
						<label for="options-popup-on-new"><input type="checkbox" id="options-popup-on-new" name="popupOnNew" value="true"></input>Popup on new message</label>
					</div>
				</form>
				<!--
				<label for="options-delete"><input type="checkbox" id="options-delete"></input>Delete message on reply</label>
				-->
			</div>
		</div>

		<div id="about" data-role="page">
			<div data-role="header">
				<a href="#message" data-icon="back">Back</a>
				<h1>About</h1>
			</div>
			<div data-role="content">
				<h2>Breif Msg 1.1</h2>
				<p>Homepage: <a href="http://www.briefmsg.org" target="_blank" rel="external">briefmsg.org</a></p>
			</div>
		</div>

		<script id="toasts" type="text/x-handlebars-template">
			<div class="popup-message" data-role="popup" data-theme="a"><p></p></div>
		</script>

		<script src="assets/md5.js"></script>
		<script src="assets/digest.authentication.js"></script>

		<script type="text/javascript">
		(function (){
			DigestAuthentication.registerInterface();
		})();
		</script>

		<script src="cordova-1.7.0.js"></script>
		<script src="assets/jquery-1.7.2.min.js"></script>

		<script type="text/javascript">
		(function (){
			$(document).on('mobileinit', function() {
	            $.mobile.changePage.defaults.changeHash = false;
	        });		
		})();
		</script>

		<script src="assets/jquery.mobile-1.2.0.min.js"></script>
		<script src="assets/jquery.validate.min.js"></script>
		<script src="assets/jquery.officesipWebSocket.js"></script>
		<script src="assets/jquery.helpers.js"></script>
		<script src="assets/handlebars-1.0.0.beta.6.js"></script>
		<script src="assets/typedarray.js"></script>
		<script src="assets/browserDetect.js"></script>
		<script src="assets/SIPml-api.js"></script>

		<script src="xcapclient.js"></script>
		<script src="controller.js"></script>
		<script src="sipclient.js"></script>
		<script src="sipdemoclient.js"></script>
		<script src="desktop.js"></script>
		<script src="debug.js"></script>

		<script type="text/javascript">
		var desktop, ui;

		(function (){

			var params = $.getUrlVars();
			var isDemo = parseInt(params['demo']) > 0;
			
			$('.desktop').hide();

			ui = new controller(isDemo);
			
			if(isDemo){
				var sip = window.sipDemo = new sipDemoClient();

				ui.setOptions({playWhenArrives:true, playAfterSending:false});
				ui.setLoginInfo({name:'user', password:'pass', domain:'officesip.local', proxy:'192.168.1.1:5060'});
				ui.setContacts([
					{ status: 'online', name: 'Mr Petersen', uri: 'sip:petersen@officesip.local' },
					{ status: 'online', name: 'Ms Bank', uri: 'sip:bank@officesip.local' },
					{ status: 'away', name: 'John Doe', uri: 'sip:jdoe@officesip.local' },
					{ status: 'away', name: 'Smith', uri: 'sip:smith@officesip.local' }
				]);
				ui.setMessages([
					{ sender: 'sip:petersen@officesip.local', time: new Date(), text: "Hi, how can I help you?"},
					{ sender: 'sip:petersen@officesip.local', time: new Date(), text: "Did you get your certificate ?"},
					{ sender: 'sip:bank@officesip.local', time: new Date(), text: "It's okay."},
					{ sender: 'sip:jdoe@officesip.local', time: new Date(), text: "Really thanks, I don’t know what to say, it’s really amazing work…"},
					{ sender: 'sip:petersen@officesip.local', time: new Date(), text: "Wait a moment..."},
					{ sender: 'sip:bank@officesip.local', time: new Date(), text: "Ok"},
					{ sender: 'sip:jdoe@officesip.local', time: new Date(), text: "I will call them back"}
				], 0);
				ui.setQuickReplies(['Thank you!', 'Sorry, I am busy', 'Wait a moment...', 'OK', 'Yes', 'No', 'Ask them to leave a message',
					'Tell them to call me back', 'I will call them back', 'Yes, I know']);
				
				ui.on('login', sip.register);
				ui.on('logout', sip.unRegister);
				ui.on('send', function(e) { sip.send(e.to, e.text); });

				ui.on('get-xcap-contacts', function() {
					setTimeout(function() {
						ui.trigger({ type:'xcapdone', contacts: [
							{ status: 'online', name: 'John Doe #1', uri: 'sip:jdoe1@officesip.local' },
							{ status: 'offline', name: 'John Doe #2', uri: 'sip:jdoe2@officesip.local' },
							{ status: 'away', name: 'John Doe #3', uri: 'sip:jdoe3@officesip.local' },
							{ status: 'busy', name: 'John Doe #4', uri: 'sip:jdoe4@officesip.local' },
							{ status: 'online', name: 'John Doe #5', uri: 'sip:jdoe5@officesip.local' }
						]});
					}, 2000);
				});

				ui.setItem = function() {};
				ui.getItem = function(shortName) {
					if(shortName == 'connected')
						return 'yes';
				}
				
				sip.onAny(ui.trigger);
			}
			else{
				var sip = new sipClient();
				var xcap = new xcapClient();
				var messageIndex = 0;
		
				function loadJsonedObject(key, defaultValue){
					var jsoned;
					if(localStorage)
						jsoned = localStorage.getItem(key);
					return (jsoned == undefined) ? defaultValue : JSON.parse(jsoned);
				}
				
				function saveJsonedObject(key, value){
					localStorage.setItem(key, JSON.stringify(value));
				}
				
				function loadMessages(){
					var messages = loadJsonedObject('com.briefmsg.messages', []);
					for(var i=0; i<messages.length; i++)
						messages[i].time = new Date(messages[i].time);
					return messages;
				}
				
				function saveMessages(messages){
					saveJsonedObject('com.briefmsg.messages', messages);
				}
				
				function loadLoginInfo(){
					return loadJsonedObject('com.briefmsg.login', {domain:'officesip.local'});
				}

				var options = loadJsonedObject('com.briefmsg.options', {
					playWhenArrives: true, 
					playAfterSending: false, 
					alwaysOnTop: false,
					runMinimized: false,
					popupOnNew: false
					});

				ui.setOptions(options);
				ui.setLoginInfo(loadLoginInfo());
				ui.setContacts(loadJsonedObject('com.briefmsg.contacts', []));
				ui.setMessages(loadMessages(), loadJsonedObject('com.briefmsg.messageindex', messageIndex));
				ui.setQuickReplies(loadJsonedObject('com.briefmsg.quicks',
					['Thank you!', 'Sorry, I am busy', 'Wait a moment...', 'OK', 'Yes', 'No', 'Ask them to leave a message',
					'Tell them to call me back', 'I will call them back', 'Yes, I know']));
			

				ui.setItem = function(shortName, value) {
					if(localStorage)
						localStorage.setItem('com.briefmsg.' + shortName, value);
				}

				ui.getItem = function(shortName) {
					if(localStorage)
						return localStorage.getItem('com.briefmsg.' + shortName);
				}
			
				ui.on('optionschanged', function(e) {
					saveJsonedObject('com.briefmsg.options', e.options);
				});
				
				ui.on('messageschanged', function(e) {
					saveMessages(e.messages);
				});

				ui.on('quickreplieschanged', function(e) {
					saveJsonedObject('com.briefmsg.quicks', e.quicks);
				});
				
				ui.on('contactschanged', function(e) {
					saveJsonedObject('com.briefmsg.contacts', e.contacts);
				});

				ui.on('login', function(e) {
					saveJsonedObject('com.briefmsg.login', e.login);

					var server = getServerAddress(e.login.domain, e.login.proxy);

					sip.register(e.login.name, e.login.domain, e.login.password, server);
					xcap.initialize(server.url+':'+server.port, 'sip:'+e.login.name+'@'+e.login.domain, e.login.name, e.login.password);
				});

				ui.on('logout', function() {
					xcap.dispose();
					sip.unRegister();
				});

				ui.on('send', function(e) {
					sip.send(e.to, e.text);
				});

				ui.on('get-xcap-contacts', function() {
					xcap.startUpdate();
				});

				ui.on('statuschanged', function(e) {
					xcap.setStatus(e.status);
				});

				sip.onAny(ui.trigger);
				xcap.onAny(ui.trigger);

				var loginTimer;
				var onBeforeQuit = function() {
					if(loginTimer)
						clearTimeout(loginTimer);
					ui.internalTrigger({ type: 'logout' });
				}

				desktop = new Desktop(ui.setStatus, onBeforeQuit);

				if(desktop.isReady()) {

					desktop.updateOptions(options);

					$('.desktop').show();

					ui.on('statuschanged', function(e) {
						desktop.setStatus.call(desktop, e.status);
					});

					ui.on('optionschanged', function(e) {
						desktop.updateOptions.call(desktop, e.options);
					});

					sip.onAny(function(e) {
						if(e.type === 'connected')
							desktop.setStatus.call(desktop, 'online');
						else if(e.type === 'disconnected')
							desktop.setStatus.call(desktop, 'offline');
						else if(e.type === 'incomingmessage')
							desktop.onNewMessage.call(desktop);
					});
				}


				setInterval(function() {
					if(ui.getMessageIndex() != messageIndex) {
						saveJsonedObject('com.briefmsg.messageindex', messageIndex = ui.getMessageIndex());
					}
				}, 2000);


				if(navigator.app && navigator.app.clearCache) {
					setInterval(navigator.app.clearCache, 60000);
				}


				$(window).on('load', function(event){
					if(ui.getItem('connected') == 'yes') {
						loginTimer = setTimeout(function() {
							ui.internalTrigger({type:'login', login:loadLoginInfo()});
							}, 2000);
					}

					// PhoneGap
					document.addEventListener('deviceready', ui.onDeviceReady, false);

					desktop.onLoad.call(desktop);
				});
	
			};

			var getServerAddress = function(realm, proxy) {

				var url, port;

				if(typeof proxy === 'undefined' || proxy.length == 0) {
					url = realm;
					port = 5060;
				}
				else {
					var colon = proxy.indexOf(':', 5);
					
					if(colon < 0) {
						url = proxy;
						port = 5060;
					}
					else {
						url = proxy.substring(0, colon);
						port = parseInt(proxy.substring(colon + 1));
					}
				}

				return { url: url, port: port };
			}
		})();
		
		window.emulateIncomingMessage = function(sender, text) {
			sipDemo.emulateIncomingMessage(sender, text);
		}
		
		</script>
	</body>
</html>
